<template>
    <view class="detail">
        <SRV-topbar :title="info.merchant.title + info.merchant.no"></SRV-topbar>
        <view class="store-top-box" v-if="info.merchant.id > 0 && false">
            <view class="store-top-left">
                <image class="store-logo" src="../../static/img/logo.png" mode=""></image>
            </view>
            <view class="store-top-right">
                <view class="store-title"> {{info.merchant.title}} </view>
				<view class="switch-btn" v-if="info.merchant.is_switch" @click="switchFun()" style="text-align: right;">切换</view>
            </view>
        </view>
        <view style="padding: 10rpx 20rpx;border: 1rpx solid #eaeaea;" v-if="tip.isShow" @click="jump(tip.jump_type, tip.jump_link)">{{tip.message}}</view>
        <uni-swiper-dot :info="info.advList" :dotsStyles="dotsStyles" :current="current2" field="content" :mode="mode">
            <swiper class="swiper-box" @change="change2" interval="5000" duration="500" circular="true" autoplay="true">
                <swiper-item v-for="(item, index) in info.advList" :key="index"
                    @click="jump(item.jumpType, item.jumpLink)">
                    <view class="swiper-item">
                        <image :src="item.cover" mode="widthFix"></image>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        <view @click="jump(openAdv.jumpType, openAdv.jumpLink)" class="open" v-if="openAdv.isShow">
            <image :src="openAdv.cover" mode="widthFix"></image>
        </view>
        
        <uni-swiper-dot v-if="activityList.length > 0" :info="activityList" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
            <swiper class="swiper-box-2" @change="change" interval="5000" duration="500" circular="true" autoplay="true">
                <swiper-item v-for="(item, index) in activityList" :key="index"
                    @click="jump(item.jumpType, item.jumpLink)">
                    <view class="swiper-item">
                        <view class="activityTitle">{{item.title}}</view>
                        <view class="activityRule" v-html="item.rule"></view>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        
		<view class="searchView"  @click="jump('search','')">
			<uni-icons type="search" size="26" color="#000"/>
			<view class="searchInput">商品关键词搜索</view>
			<view class="searchBtn">搜索</view>
		</view>
		
        <view class="toplist" v-if="info.brand && info.brand.list.length > 0">
            <view class="title">{{info.brand.title}}</view>
            <view class="more" v-if="info.brand.more != ''" @click="jump(info.brand.jumpType, info.brand.jumpLink)">
                {{info.brand.more}}
            </view>
            <view class="heng"></view>
            <view class="topnav">
                <view v-for="(item, index) in info.brand.list" :key="index" class="list">
                    <image :src="item.cover" mode="aspectFill" @click="jump(item.jumpType, item.jumpLink)"></image>
                    <text style="text-align: center;">{{item.title}}</text>
                </view>
            </view>
        </view>
        
        <view class="toplist" v-if="info.meal && info.meal.list.length > 0">
            <view class="title">{{info.meal.title}}</view>
            <view class="more" v-if="info.meal.more != ''" @click="jump(info.meal.jumpType, info.meal.jumpLink)">
                {{info.meal.more}}
            </view>
            <view class="heng"></view>
            <view class="topnav">
                <view v-for="(item, index) in info.meal.list" :key="index" class="list">
                    <image :src="item.picture" mode="aspectFill" @click="jump(item.jumpType, item.jumpLink)"></image>
                    <view style="text-align: center;">{{item.title}}</view>
                    <view>
                        <view class="price">￥ {{item.price}}</view>
                        <view class="market_price">￥ {{item.market_price}}</view>
                    </view>
                </view>
            </view>
        </view>
		<view class="toplist" v-if="info.scrabble && info.scrabble.list.length > 0">
            <view class="title">{{info.scrabble.title}}【<text>{{info.scrabble.condition.stateName}}:{{countDownList}}</text>】</view>
            <view class="more" @click="showRoleInfo(info.scrabble.title, info.scrabble.ruleInfo)">
                {{info.scrabble.more}}
            </view>
            <view class="heng"></view>
		    <view class="topnav">
                <view class="goods2" v-for="(item,index) in info.scrabble.list" :key="index" @click="jump(item.jumpType, item.jumpLink)">
                	<image :src="item.picture" mode=""></image>
                    <view class="goods2_line">
                        <text :class="'price_name state_'+info.scrabble.condition.state">{{info.scrabble.condition.message}}</text>
                        <text class="sale_price">￥{{item.scrabble_price}}</text>
                    </view>
                    <view class="goods2_line" style="text-align: right;padding-right: 16rpx;">
                        <text class="cost_price" style="padding-right: 20rpx;">门市价：{{item.market_price}}</text>
                    </view>
                	<view class="goods2_line">
                        <view class="line_name">{{item.name}}</view>
                    </view>
                </view>
		    </view>
		</view>
		<view class="toplist" v-if="info.productList && info.productList.length > 0">
		    <view class="title">推荐商品</view>
		    <view class="more" @click="jump('appoint_view', '/pages/store/productList')">
		        更多
		    </view>
            <view class="heng"></view>
		    <view class="topnav">
                <view class="goods2" v-for="(item,index) in info.productList" :key="index" @click="jump(item.jumpType, item.jumpLink)">
                	<image :src="item.picture" mode=""></image>
                    <view class="goods2_line">
                        <text class="price_name state_1">会员价</text>
                        <text class="sale_price">￥{{item.minPrice}}</text>
                    </view>
                    <view class="goods2_line">
                        <text class="cost_price" style="margin-right: 20rpx;">销量：{{item.sales}}</text>
                        <text class="cost_price">门市价：{{item.marketMinPrice}}</text>
                    </view>
                	<view class="goods2_line">
                        <view class="line_name">
                            <text v-if="item.reductionName != ''" style="background:rgba(235, 89, 56, 1);padding: 6rpx;color: #fff;margin-right: 6rpx;">{{item.reductionName}}</text>
                            <text>{{item.name}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view>
            <fireworks v-if="isLun" zIndex="999" ticks="150"/> 
        </view>
        <uni-popup ref="popup" type="center" :animation="false">
            <view class="paypir">
                <view class="tipTitle">赠品提醒</view>
                <view class="drawLi" v-for="(tip, i) in tipList" :key="i" @click="jump(tip.jumpType, tip.jumpLink)">
                    <view>{{tip.title}}</view>
                    <view>点击领取</view>
                </view>
            	<image @click="close()" class="closeBtn" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    import ShareIndex from '../../static/share.js';
    export default {
        mixins: [ShareIndex],
        data() {
            return {
                mode: 'round',
                current: 0,
                current2: 0,
                dotsStyles: {
                    backgroundColor: 'rgba(255,255,255,0.3)',
                    selectedBackgroundColor: '#FFC600',
                    selectedBorder: '1px rgba(255,198,0,1) solid',
                    border: '1px rgba(255,255,255,0.3) solid',
                    selectedBorder: '1px rgba(255,198,0,1) solid',
					bottom: 15,
                },
                storeType: 2,
                countDownList: '00时00分',
                parentKey: '',
                info: {
                    merchant: {
                        title: '超圳商行',
                        no: '',
                    },
                },
                tipList: [],
                openAdv: {
                    title: '',
                    cover: '',
                    jumpType: '',
                    jumpLink: '',
                    isShow: false,
                },
                activityList: [],
                isDown : false,
                isLun: false,
                interval: '',
            };
        },
        methods: {
            getLocationAddress() {
            	wx.getLocation({
            		type: 'wgs84',
            		success: (res) => {
            			uni.setStorageSync('latitude', res.latitude);
            			uni.setStorageSync('longitude', res.longitude);
            			uni.setStorageSync('is_local', true);
                        console.info(uni.getStorageSync('latitude'));
            		},
            		fail: function() {
            			
            		},
            	});
            },
            change(e) {
                _self.current = e.detail.current;
            },
            change2(e) {
                _self.current2 = e.detail.current;
            },
			// 时间不够两位补全
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
            countDown() {
                if(this.info.scrabble.downTime == 0) {
                    return false;
                }
                if(this.isDown) {
                    clearInterval(this.interval);
                }
                let time = this.info.scrabble.condition.downTime;
                let hou = parseInt(time % (60 * 60 * 24) / 3600);
                let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
                let obj = {
                    hou: this.timeFormat(hou),
                    min: this.timeFormat(min),
                };
                this.countDownList = obj.hou + '时' + obj.min + '分';
                this.interval = setInterval(() => {
                    this.info.scrabble.downTime = this.info.scrabble.downTime - 60;
                    let time = this.info.scrabble.downTime;
                    // 获取天、时、分、秒
                    let hou = parseInt(time % (60 * 60 * 24) / 3600);
                    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
                    let obj = {
                        hou: this.timeFormat(hou),
                        min: this.timeFormat(min),
                    };
                    this.countDownList = obj.hou + '时' + obj.min + '分';
                    this.isDown = true;
                }, 60000)
    　　　　	},
            getInfo() {
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                serve.request({
                    url: '/store/index/index',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        storeType: _self.storeType,
                        parentKey: _self.parentKey
                    },
                    v: '/v2',
                }).then(res => {
                    uni.hideLoading();
                    _self.info = res.data;
                    _self.getOpenAdv();
                    _self.countDown();
                });
            },
            showRoleInfo(title, remark) {
                uni.showModal({
                    title: title,
                    content: remark,
                    showCancel:false,
                });
            },
			switchFun() {
				serve.request({
				    url: '/member/member/switch',
				    data: {
				        appkey: uni.getStorageSync('appkey'),
				        'access-token': uni.getStorageSync('access-token'),
				    },
				    v: '/v2',
				}).then(res => {
					uni.setStorageSync('parentKey', '');
					_self.parentKey = '';
				    _self.getInfo();
				});
			},
            getOpenAdv() {
                serve.request({
                    url: '/store/draw/index',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    _self.openAdv = res.data;
                    // this.getDrawInfo();
                });
            },
            getDrawInfo() {
                serve.request({
                    url: '/store/draw/check-draw',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v3',
                }).then(res => {
                    if(res.data.state == 1) {
                        this.tipList = res.data.list;
                        this.$refs.popup.open();
                    }
                });
            },
            close() {
            	this.$refs.popup.close();
            },
            jump(type, link) {
                common.jump(type, link);
            }
        },
        onLoad(options) {
            _self = this;
            wx.getPrivacySetting({
                success: res => {
                    console.info("success");
                },
                fail: () => {console.info("fail");},
                complete: () => {}
            })
            this.storeType = 2;
            // if (uni.getStorageSync('is_local') == false) {
            //     this.getLocationAddress();
            // }
            // this.getInfo();
        },
        async onShow() {
            await this.$defaultLogin();
            this.shareItem.title = '期待您的加入！';
            this.shareItem.path = '/pages/index/index?parentKey='+uni.getStorageSync('parentKey');
            this.shareItem.linePaht = '/pages/index/index';
            this.shareItem.query = 'parentKey='+uni.getStorageSync('parentKey');
            this.parentKey = uni.getStorageSync('parentKey');
            this.getInfo();
        },
        onPullDownRefresh() {
            this.getInfo();
        }
    };
</script>

<style lang="scss" scoped>
    .detail {
        padding-bottom: 120upx;
        .store-top-box {
            padding: 30rpx;
            background: linear-gradient(250deg, #fd6a6a, #963700);
            display: flex;
            justify-content: start;
            align-items: center;
            // border-bottom: 16rpx #FBFBFD solid;

            .store-top-left {
                display: flex;
                justify-content: center;
                align-items: center;

                .store-logo {
                    width: 120rpx;
                    height: 120rpx;
                }
            }

            .store-top-right {
                margin-left: 40rpx;
                font-size: 36rpx;
                color: #FFF;
                line-height: 1.5;
				width: 75%;
                .store-title {
                    font-size: 60rpx;
                }

                .store-NO {
                    font-size: 30rpx;
                    color: #FFF;
                }
            }
        }
        .swiper-box {
            width: 100%;
            height: 380upx;

            .swiper-item {
                width: 100%;

                image {
                    width: 100%;
                    height: 380upx;
                }
            }
        }
        .swiper-box-2 {
            position:relative;
            margin:20rpx 10rpx;
            padding: 20rpx;
            border: 4rpx solid rgba(255,198,0,0.8);
            border-radius: 10rpx;
            .activityTitle{
                font-size: 42rpx;
                margin-bottom: 10rpx;
            }
        }  
        .open {
            background-color: #ececec;

            image {
                width: 100%;
                height: auto;
                // margin-top: 10upx;
                border-radius: 10upx;
            }
        }
		.searchView{
			border: 1rpx solid #333;
			display: flex;
			margin: 20rpx;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			align-items: center;
			align-content: center;
			justify-content: space-between;
			font-size: 36rpx;
		}
		.searchInput{
			width: 60vw;
		}
		.searchBtn{
			    background: #d1b518;
			    color: #fff;
			    border-radius: 20rpx;
			    width: 18vw;
			    text-align: center;
			    height: 60rpx;
			    line-height: 60rpx;
			    letter-spacing: 10rpx;
		}
        .paypir{
            background-color: #fff;
            width: 80vw;
            height: 300rpx;
            border-radius: 50rpx;
            padding: 20rpx;
            .tipTitle {
                text-align: center;
                font-size: 40rpx;
                letter-spacing: 10rpx;
            }
            .closeBtn {
                width: 60rpx;
                height: 60rpx;
                border-radius: 100rpx;
                position: absolute;
                bottom: -3vh;
                margin-left: 34vw;
                border: 1px solid #ffd900;
                padding: 10rpx;
                background-color: #ffd900;
            }
            .drawLi {
                display: flex;
                margin: 20rpx;
                justify-content: space-between;
                animation: glow 800ms ease-out infinite alternate;
                padding: 10rpx;
            }
            
            @keyframes glow {
                0% {
                    box-shadow: 0 0 5rpx rgba(252, 94, 94, .2), inset 0 0 5px rgba(252, 94, 94, .1), 0 1rpx 0 #d70c19;
                }
                100% {
                    border-color: #d70c19;
                    box-shadow: 0 0 5rpx rgba(252, 94, 94, .6), inset 0 0 10px rgba(252, 94, 94, .4), 0 1rpx 0 #d70c19;
                }
            }
        }
        .toplist {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 30upx 0upx 20upx 0upx;
            border-bottom: 16upx #eee solid;

            .title {
                height: 24upx;
                margin-left: 30upx;
                padding-left: 20rpx;
                position: relative;
                float: left;
                font-size: 30upx;
                // text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }

            .more {
                width: 130upx;
                height: 30upx;
                margin-right: 10upx;
                position: relative;
                float: right;
                font-size: 30upx;
                text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }

            .title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }

            .topnav {
                display: flex;
                box-sizing: border-box;
                // padding-bottom: 30upx;
                // border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
                flex-wrap: wrap;
                width: 100%;

                .list {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 25%;
                    padding: 20rpx 0;
                    color: #23345B;
                    font-size: 24upx;

                    image {
                        width: 98upx;
                        height: 97upx;
                    }
                }
				.goods{
					display: flex;
					box-sizing: border-box;
					align-items: flex-start;
					padding: 20rpx;
					border-bottom: 1px solid #ebebeb;    
				    position: relative;    
					width: 100vw;
				    .recommend{
				        position: absolute;
				        left: 10rpx;
				        top: 0rpx;
				        padding: 5rpx 10rpx;
				        background: #0000ff;
				        color: #fff;
				        font-size: 26rpx;
				        border-radius: 10rpx;
				    }
				    .hot{
				        position: absolute;
				        left: 70rpx;
				        bottom: 5rpx;
				        padding: 5rpx 10rpx;
				        background: #ff000f;
				        color: #fff;
				        font-size: 26rpx;
				        border-radius: 10rpx;
				    }
				    .new {
				        position: absolute;
				        left: 120rpx;
				        top: 0rpx;
				        padding: 5rpx 10rpx;
				        background: #1086e4;
				        color: #fff;
				        font-size: 26rpx;
				        border-radius: 10rpx;
				    }
					.left_item {						
						margin-right: 15rpx;
						image {
							width:180rpx;
							height:180rpx;
						}
					}
					
					.right_item {
						flex: 1;
						.right_con{
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							white-space:unset;
							.oneline{
								
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
								white-space:unset;
								height: 100rpx;
							}
							.name{
								display: initial;
								max-width: 300rpx;
								font-size: 34rpx;
							}
							.rate{
								color: #FFBC00;
								font-size: 30rpx;
								margin-top: 10rpx;
							}
				            .market{
				                color: #5f5b5b;
				                font-size: 30rpx;
				                margin-top: 10rpx;
                                margin-left: 10rpx;
				                text-decoration: line-through;
				            }
							.state{
								display: initial;
							    padding: 5rpx 8rpx;
							    text-align: center;
							    color: #FFFFFF;
							    font-size: 32rpx;
							    border-radius:2rpx;
							    margin-right: 10rpx;
							}
						}
				        .sales {
				            display: flex;
				            align-items: center;
				            font-size: 28upx;
				                
				            image {
				                width: 36upx;
				                height: 36upx;
				                margin-right: 12upx;
				            }
				        }
					}
				}
                .goods2 {
                	width: 45vw;
                    padding-bottom: 30rpx;
                    border: 6rpx solid #eaeaea;
                    margin: 10rpx 1% 0 1%;
                    padding: 10rpx 4rpx;
                    text-align: center;
                    border-radius: 10rpx;
                	image {
                		width: 330upx;
                		height: 330upx;
                        border: 1rpx solid #eee;
                		border-radius: 2%;
                	}
                	.line_name{
                		font-size:30upx;
                		line-height: 50upx;
                		color: #333;
                		text-overflow: -o-ellipsis-lastline;
                		overflow: hidden;
                		text-overflow: ellipsis;
                		display: -webkit-box;
                		-webkit-line-clamp: 2;
                		-webkit-box-orient: vertical;
                	}
                	.goods2_line{
                        text-align: center;
                	}
                    .price_name {
                        font-size: 28rpx;
                        text-align: right;
                    }
                    .sale_price {
                        font-size: 42rpx;
                        color: #e61d07;
                    }
                    .cost_price {
                        text-align: right;
                        // padding-right: 20rpx;
                        font-size: 26rpx;
                        color: #615555;
                    }
                }
            }
        }
        .state_0{
            color: #ff000f;
        }
        .state_1{
            color: #FFBC00;
        }
        .state_2{
            color: #0b44ea;
        }
        .heng{
            border-bottom: 1rpx #eaeaea solid;
            width: 100vw;
            margin-top: 50rpx;
        }
    }
</style>
